<template>
  <div class="questions-body">
	<!--//弹窗-->
  <Modal
      v-model="modal1"
      title="内容"
      :styles="{top: '20px'}">
      <div class="html-detail" v-html="contents">
          {{ contents }}
      </div>
  </Modal>

  <div class="content-search">
    <Input v-model="searchText"  placeholder="请输入中文或英文搜索术语...">
        <Button slot="append" @click="searchBtn" icon="ios-search" ></Button>
    </Input>

  </div>
 	<div class="questions-view">
      <!--<Table :columns="columns" :data="questionslist"></Table>-->
      <table v-if="questionslist.length>0" class="question-list">
      	<thead>
      		<tr class="question-thead">
      			<td style="padding-left: 18px;">问题(中文)</td>
      			<td style="text-align: center;">详情</td>
      		</tr>
      	</thead>
      	<tbody>
      		<tr v-for="item in questionslist">
	      		<td class="question-td1">
	      			<span v-if="item.title!=null">{{item.title}}</span>
	      			<span v-else>{{item.english_title}}</span>
	      		</td>
	      		<td class="question-td2">
	      			<a @click="toQuestionContent(item.id)" href="javascript:;" class="green-btn">中英文</a>
	      		</td>
	      	</tr>
      	</tbody>
      </table>

      <li style="margin:0 auto;list-style: none;">
          <div class="pagination-box">
              <pagination :pagination="pagination"  @pagination="handlePage"></pagination>
          </div>
    </li>
 	</div>

  </div>
</template>
<style scoped>
  .questions-body{
  max-width: 1200px;
  width: 90%;
  background: #fff;
  margin:0 auto;
  padding-bottom: 42px;
}

.top-tis{
  margin-left: 12px;
  height: 42px;
  line-height: 42px;
  border-bottom: 1px solid #eee;
}

.questions-view{

  width: 80%;
  margin:24px auto;

}
.questions-ul{
  border-bottom: 1px solid #ddd;
}
.questions-li{
	list-style: none;
  height: auto;
  line-height: 42px;
  padding: 10px 0;
}
.content-search{
    width: 50%;
    margin: 36px auto;

  }
 .pagination-box{
 		padding:10px 20px;margin-left:30%;
 }
 .question-thead{
 	height: 48px;
 	background: #F8F8F9;
 }
 .question-thead td{
 	vertical-align: middle;
 }
 .question-list{
 	border-collapse:collapse;
 	border-spacing:0;
 	border: 2px solid #EEEFF1;
  width:100%;
 }
 .question-list tr{
 	border: 1px solid #EEEFF1;
 }
 .green-btn{
 	display: inline-block;
 	background-color: #19be6b;
 	font-size: 12px;
 	padding: 5px 8px;
 	color: #FFFFFF;
 	border-radius: 3px;
 }
 .question-td1{
 	width: 80%;min-height: 0;height: 48px;vertical-align: middle;
 	box-sizing: border-box;
 	padding: 8px 18px;
 	line-height: 120%;
 }
 .question-td2{
 	width: 20%;
 	text-align: center;
 	vertical-align: middle;
 }

  @media (max-width:1024px){
  	.content-search{width: 80%;}
    .questions-body{width: auto;}
    .questions-view{ width:auto; margin-left:20px; margin-right:20px;}
    .ivu-table-cell{
    	padding-top: 10px;
    	padding-bottom: 10px;
    }
    .pagination-box{
    	margin-left: 0;
    }
  }

</style>

<script>
import pagination from "../../components/pagination.vue";

export default {
  components:{
     pagination,
  },

  data(){

    return {

    	questionslist:[],
      searchText:'',
      modal1: false,
      contents: '',
      pagination: {
        total: 0,
        count: 0,
        per_page: 0,
        current_page: 1,
        total_pages: 0
      },
      columns: [
      			{
                title: '问题（中文）',
                key: 'title',
                align: 'left',
            },
//          {
//              title: 'Question',
//              key: 'english_title',
//              align: 'left',
//          },
            {
              title: '详情',
              key: 'action',
              width: 150,
              align: 'center',
              render: (h, params) => {
                  return h('div', [
                      h('Button', {
                          props: {
                              type: 'success',
                              size: 'small'
                          },
                          style: {
                              marginRight: '5px'
                          },
                          on: {
                              click: () => {
                                  this.routeLink('/questions-content?id=' + params.row.id);
                              }
                          }
                      }, '中英文'),
                  ]);
              }
          }
        ],
    }

  },
  created() {
  	this.getCarousel();
  },
  methods:{
    getCarousel(){
    	this.$http.get('/questions/list',{
    		params:{
    			include:"category,statute",
    			fe:1
    		}
    	})
    	.then(questions => {
        	this.questionslist = questions.data.data;
          this.pagination = questions.data.meta.pagination;
        	}).catch(err => {
            this.$Notice.open({
              title: 'questions',
            })
            // this.$Message.error( 'questions');

        })
    },
     // 分页方法
    handlePage(current) {
      this.pagination.current_page = current;
      this.search();
    },

    // 检索按钮方法
    search() {
      var _query = {
        page: this.pagination.current_page,
        category: this.$route.query.category,
        name: this.$route.query.name,
        fe:1
      };
      this.$router.push({path:this.$router.path, query:_query});
      this.$http.get('/questions/list',{
						params: _query
					}).then(ret => {
					this.questionslist = ret.data.data;
				}).catch(err => {

				})
    },

    routeLink(link) {
          this.$router.push({path: link});
    },
    // 查看内容
    showContent(index, type) {
      if ( type == 'english' ) {
        this.contents = this.questionslist[index].english_content;
      }else {
        this.contents = this.questionslist[index].content;
      }
      this.modal1 = true;
    },

    toQuestionContent(id){
    	this.routeLink('/questions-content?id=' + id);
    },

    searchBtn(){
        var searchTextKey = this.searchText;
        if( searchTextKey =='' ){
          this.$Notice.open({
            title: '请输入中文或英文搜索问答..'
          })
          // this.$Message.error( '请输入中文或英文搜索问答..');
          return;
        }else{
            this.$store.commit('mainLoading', true);
            this.$http.get('/questions/list/?include=category&fe=1&title=' + searchTextKey)
            .then(questions => {
                  this.questionslist = questions.data.data;
                  this.$store.commit('mainLoading', false);
            })
            .catch(err => {
                this.$Notice.open({
                  title: 'questions'
                })
                  // this.$Message.error( 'questions');
            })
        }
      }

  }
}
</script>


